<template>
  <div class="goods-info-wrap" ref="goodsInfoWrap">
    <quill-editor ref="myTextEditor"
                  v-model="detailDesc"
                  style="min-height: 400px"
                  :options="editorOption"
    ></quill-editor>

    <el-dialog :visible.sync="sleImg" title="选择图片">
      <sel-img-photogallery ref="selImg" :type="'03'" @select="onSelectImgs" >
      </sel-img-photogallery>
    </el-dialog>
    <div class="button-group__center button-fixed">
      <el-button type="default" @click="dispatchPrevStep">上一步</el-button>
      <!--<el-button type="default" @click="dispatchNextStep">填写高级选项</el-button>-->
      <el-button type="primary" @click="dispathSaveBaseInfo">保存上架</el-button>
    </div>
  </div>
</template>

<script>
  import selImgPhotogallery from '@/components/pds/common/sel_img_photogallery'
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';
  import {quillEditor} from 'vue-quill-editor';
  // import {default} from './quillConfig'
  import mixin from './../mixins'

  export default {
    mixins: [mixin],
    props: {
      goodsInfo: {
        type: Object,
      }
    },
    data() {
      return {
        sleImg: false,
        currentStep: 1,
        editorOption: {
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          theme: 'snow',
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          placeholder: '填写商品详情...',
          modules: {
            toolbar: {
              container: [                          // 工具栏配置, 默认是全部
                ['bold'],
                ['italic'],
                ['underline'],
                ['strike'],
                [{'list': 'ordered'}, {'list': 'bullet'}],
                ['blockquote'], ['code-block'],
                ['link'],
                ['image'],
                [{'list': 'ordered'}, {'list': 'bullet'}],
              ],
              handlers: {
                'image': (value) => {
                  if (value) {
                    this.sleImg = true
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
            }
          }
        },
        // 变量
        detailDesc: '',
        wrapWidth: '',

      }
    },
    components: {quillEditor, selImgPhotogallery},
    created() {
      this.detailDesc = this.goodsInfo.detailDesc
    },
    methods: {
      dispathSaveBaseInfo() {
        this.goodsInfo.detailDesc = this.detailDesc
        this.$emit('save')
      },
      onSelectImgs(imgs) {
        let goodsDesc = ''
        imgs.forEach(item => {
          goodsDesc = goodsDesc + "<img width=\"400\" src=" + item.picUrl + " alt=\"\">"
        })
        this.detailDesc = this.detailDesc + goodsDesc
        this.sleImg = false
      }
    },

  }
</script>

<style scoped>
  .goods-info-wrap {
    position: relative;
    padding: 0 20px;
    padding-bottom: 60px;
  }

  .button-group__center {
    margin-top: 20px;
    text-align: center;
  }

  .button-fixed {
    position: fixed;
    margin-left: 200px;
    margin-bottom: 30px;
    left: 0;
    bottom: 0;
    width: calc(100% - 170px);
  }

  .quill-editor {
    height: 400px;
  }
</style>


